<template>
  <div>
    <el-card>
      <div slot="header"
        :class="$style.header">
        <div :class="$style.search">
          <span>用户名：</span>
          <el-input v-model="name"
            placeholder="请输入"
            clearable
            @clear="filterChange" />
        </div>
        <el-button type="primary"
          @click="filterChange">
          搜索<i class="el-icon-search"></i>
        </el-button>
      </div>
      <el-table :data="tabelDtata">
        <el-table-column label="用户名">
          <template slot-scope="{row}">
            {{row.member_id}}
          </template>
        </el-table-column>

        <el-table-column label="升级前级别"
          align="center">
          <template slot-scope="{row}">
            {{row.level_from}}
          </template>
        </el-table-column>

        <el-table-column label="升级后级别"
          align="center">
          <template slot-scope="{row}">
            {{row.level_to}}
          </template>
        </el-table-column>

        <el-table-column label="升级费用"
          align="center">
          <template slot-scope="{row}">
            {{row.money}}
          </template>
        </el-table-column>

        <el-table-column label="升级时间"
          align="center">
          <template slot-scope="{row}">
            {{row.create_time}}
          </template>
        </el-table-column>

        <el-table-column label="备注"
          align="center">
          <template slot-scope="{row}">
            {{row.remark}}
          </template>
        </el-table-column>
      </el-table>
       <BasePagination :max="maxPage"
        :now.sync="nowPage"></BasePagination>
    </el-card>
  </div>
</template>
<script>
import BasePagination from '@/components/BasePagination'

export default {
  components:{
    BasePagination
  },
  data() {
    return {
      name: '',
      tabelDtata: [
        {
          label:'用户名',
          prop:'member_id'
        },
        {
          label:'升级前等级',
          prop:'level_from'
        },
        {
          label:'升级后等级',
          prop:'level_to'
        },
        {
          label:'创建时间',
          prop:'create_time'
        },
        {
          label:'备注',
          prop:'remark'
        },
      ],
      maxPage: 1,
      nowPage: 1,
    }
  },
  created(){
    this.getData();
  },
  methods:{
    getData(){
      this.$http.get('/Manage/member_level/lists',{
        params:{
           page:this.nowPage,
           rows:10,
           keywords:this.name,
        }
      })
      .then(res=>{
        if(res.code===1){
          this.tabelDtata = res.data.list;
        }
      })
    },
    filterChange(){
      this.nowPage === 1 ? this.getData() :　(this.nowPage=1)
    }
  }
}
</script>
<style lang="scss" module>
.header {
  display: flex;
  align-items: center;

  > div {
    flex-grow: 0;
    flex-shrink: 0;

    &:not(:last-child) {
      margin-right: 20px;
    }

    > span {
      margin-right: 5px;
    }
  }

  .search {
    display: flex;
    align-items: center;

    > div {
      width: 200px;
    }
  }

  [space] {
    flex-grow: 1;
  }
}
</style>



